<template>
  <van-sticky>
    <!-- 头部导航 -->
    <CircleNav></CircleNav>
    <!-- 搜索框 -->
    <van-search v-model="keyword" shape="round" background="#fff" placeholder="请输入搜索关键词" @search="onSearch"
      @cancel="onCancel" />
  </van-sticky>

  <!-- Tab标签页 -->
  <van-tabs v-model:active="activeClass" @change="activeFun" swipeable duration="0.5">
    <van-tab v-for="sc in shopClass" :key="sc.sp_class_id" :title="sc.sp_class_name">
      <!-- 网格小分类 -->
      <van-grid center :square="false" :clickable="true" :border="false">
        <van-grid-item v-for="ss in shopSmall" :key="ss.sm_id
          " :icon="UPL + ss.sm_icon" :text="ss.sm_name" @click="getShopBySmall(ss.sm_id)" />
      </van-grid>
    </van-tab>
  </van-tabs>

  <!-- list -->
  <van-list @load="onLoad" v-model:loading="loading" :finished="finished">

    <!-- 商品 -->
    <div style="margin-bottom: 60px">
      <div v-for="shop in shops" :key="shop.sp_id" class="card">
        <van-card :price="parseInt(shop.img_price).toFixed(2)" :title="shop.sp_name" :lazy-load="true"
          :thumb="UPL + shop.sp_img" @click="$router.push(`/shopDetail?id=${shop.sp_id}`)">
          <template #desc>
            <div class="sp_rmd">{{ shop.sp_rmd }}</div>
          </template>
          <template #footer>
            <van-tag plain type="primary" style="margin-right: 10px;">
              {{ shopClass[shop.sp_class_id - 1].sp_class_name }}
            </van-tag>
            <van-tag plain type="primary">{{ shopSmallAll[shop.sm_id - 1].sm_name }}</van-tag>
          </template>
        </van-card>
      </div>
      <div v-show="finished" style="text-align: center;">
        没有更多了
      </div>
      <van-back-top />

    </div>

  </van-list>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { shopApi } from '@/http/apis/shopApi'
import baseURL from '@/http/baseURL'
// 上传的图片存储地址
const UPL = baseURL.UPL + '/'
// 商品数据
let shops = reactive([])
let total = ref(1)  // 所有数据总数
// 获取所有商品
function getAllShop(pno, pagesize) {
  let params = { pno, pagesize }
  shopApi.queryAllShop(params).then((res) => {
    shops.push(...res.data.data.pets)
    total.value = res.data.data.total
  })
}

// 触底触发 
const finished = ref(false)
const loading = ref(false);
let n = 0
const onLoad = () => {
  loading.value = false // 进来之后会默认改为true,所以需要手动设置为false
  if (shops.length >= total.value) {
    finished.value = true;
    // console.log(finished.value, 'finished.value');
    return
  }
  // 出发之后会默认把loading改为true
  getAllShop(1 + n, 5)
  n++
}


// 搜索框
let keyword = ref("");
function onSearch() {
  if (keyword.value == '') {
    shops.splice(0, shops.length)
    getAllShop(1, 5)
    return
  }
  shopApi.queryShopByKeyword({ keyword: keyword.value }).then((res) => {
    // console.log('模糊查询', res.data);
    shops.splice(0, shops.length)
    shops.push(...res.data.data)
  })
}
function onCancel() {
  keyword = "";
}

// 大分类功能
let activeClass = ref(0);     // 当前激活的大分类Tab标签
let shopClass = reactive([])  // 存放所有大分类
async function queryAllClass() {  //获取所有大分类
  let res = await shopApi.queryShopClass()
  shopClass.push(...res.data.data)
}
// 小分类
let shopSmallAll = reactive([])
async function getShopSmallAll() {
  let res = await shopApi.queryShopSmallAll()
  shopSmallAll.push(...res.data.data)
}

let shopSmall = reactive([])  // 通过大分类获取的小分类
async function activeFun() {  // 切换大类触发获取小分类并请求商品
  let res = await shopApi.queryShopSmall({ sp_class_id: activeClass.value + 1 })
  shopSmall.splice(0, shopSmall.length)
  shopSmall.push(...res.data.data)
}
async function getShopBySmall(sm_id) {  // 通过小分类获取商品
  // console.log(sm_id);
  let res = await shopApi.queryShopByClassAndSmall({ sm_id })
  shops.splice(0, shops.length)
  shops.push(...res.data.data)
  // console.log(res);
}



onMounted(() => {
  queryAllClass() // 挂在完毕加载当前页大分类
  activeFun()     // 挂在完毕加载第一页小分类
  getShopSmallAll() // 获取所有小分类
})
</script>

<style lang="scss" scoped>
.card {
  margin: 10px 15px 10px 10px;
  border-radius: 15px;
  overflow: hidden;

  .sp_rmd {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;

  }
}
</style>
